<template>
  <div>
    <video
      id="me"
      style="object-fit:fill"
      preload="auto"
      autoplay
      playsinline="true"
      webkit-playsinline="true"
      x5-video-player-type="h5"
      x5-video-player-fullscreen="true"
      x5-video-orientation="portraint"
    ></video>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rtc: "",
      toclientid:"RHZL-KVFH-TAX2-00000001",
      host:"webrtc.qq-kan.com",
      conmode:"live",
      consource:"MainStream",
      deviceNo:"0132320041500062",
    };
  },
  methods: {
    //websocket数据初始化
    pageInit() {
      var toclientid = "RHZL-KVFH-TAX2-00000001";
      var host = "webrtc.qq-kan.com";
      var conmode = "live";
      var consource = "MainStream";
      // var toclientid = this.toclientid;
      // var host = this.host;
      // var conmode = this.conmode;
      // var consource = this.consource;
      var webrtcclientid = this.uuid();

      if (conmode === "live" || conmode === "play") {
      } else {
        conmode = "live";
        consource = "MainStream";
      }
      var ishttps = "https:" == document.location.protocol ? true : false;
      if (ishttps) {
        this.rtc.connect(
          "wss://" + host + "/wswebclient/" + webrtcclientid,
          webrtcclientid,
          toclientid,
          conmode,
          consource
        );
      } else {
        this.rtc.connect(
          "ws://" + host + "/wswebclient/" + webrtcclientid,
          webrtcclientid,
          toclientid,
          conmode,
          consource
        );
      }
      console.log(
        "pageInit    --------------------------------------  mute = ",
        this.rtc.mute
      );
    },

    //动态生成一个uuid
    uuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4";
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
      s[8] = s[13] = s[18] = s[23] = "-";
      var uuid = s.join("");
      return uuid;
    },

    //websocket的事件监听
    rtcSocket() {
      this.rtc.on("connected", socket => {
        this.rtc.createStream({
          video: true,
          audio: true
        });
      });
      this.rtc.on("stream_created", stream => {});
      this.rtc.on("pc_add_stream", (stream, socketId) => {
        this.rtc.attachStream(stream, "me");
      });
      this.rtc.on("stream_connected", Connection => {});
      this.rtc.on("socket_error", Connection => {});
      this.rtc.on("socket_closed", Connection => {
        console.log("socket_closed reconnect = ", this.rtc.reconnect);
        if (this.rtc.reconnect === true) {
          this.pageInit();
        }
      });

      this.rtc.on("equipment_message", message => {
        console.log("equipment_messaget ", message);
      });
      this.rtc.on("player_message", (channel, socketid, message) => {
        var json;
        json = JSON.parse(message);
        if (json.type === "__updateframeinfo") {
        }
      });
    },

    showByWebRTC() {
      let params={
        deviceNo:this.deviceNo,
      }
      this.$postForm('dmc/camera/showByWebRTC',params).then(res=>{
        console.log(res,"查询客户端信息")
        if(res.code==200){
          this.toclientid=res.result.toclientid;
          this.host=res.result.host;
          this.conmode=res.result.conmode;
          this.consourceres=res.result.consourceres;
        }else{
          
        }
      })
    },

    alertVideoShowByWebRTC() {
      let params={};
      params.alertId='';
      this.$postForm('dmc/camera/alertVideoShowByWebRTC',params).then(res=>{
        console.log(res);
        if(re.code==200){
          this.toclientid=res.result.toclientid;
          this.host=res.result.host;
          this.conmode=res.result.conmode;
          this.consourceres=res.result.consourceres;
        }else{

        }
      })
    },

  },
  mounted() {
    this.rtc = SkyRTC();
    console.log(this.rtc, "23行----");
    this.showByWebRTC();
    setTimeout(()=>{
      this.pageInit();
      this.rtcSocket();
    },2000)
  },
};
</script>
<style lang="scss" scoped>
video {
  height: 400px;
  width: 500px;
  background-color: rgb(0, 0, 0);
  -webkit-filter: grayscale(0%);
}
</style>